<!-- 运营企业信息 -->
<template>
  <div class="app-container">
    <el-descriptions title="企业信息" direction="vertical" :column="3" border>
      <template slot="extra">
        <el-button type="primary" size="small" icon="el-icon-edit" @click="handleUpdate" >编辑信息</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i> 企业全称
        </template>
        {{agent.entName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-coordinate"></i> 统一社会信用代码
        </template>
        {{agent.unifiedSocialCreditIdentifier}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-postcard"></i> 行政区划代码(邮编)
        </template>
        {{agent.areaCode}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-money"></i> 注册资金(万元)
        </template>
        {{agent.registerMoney}}
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          <i class="el-icon-location-outline"></i> 企业注册地址
        </template>
        {{agent.entAddress}}
      </el-descriptions-item>
      <el-descriptions-item > 
        <template slot="label">
          <i class="el-icon-date"></i> 营业执照注册日期
        </template>
        {{agent.registerDate}}
      </el-descriptions-item>
      <el-descriptions-item span="2" :contentStyle="{ 'width': '80%'}">
        <template slot="label">
          <i class="el-icon-collection"></i> 经营范围
        </template>
        {{agent.runScope}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i> 法人代表姓名
        </template>
        {{agent.legalerName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i> 法人手机
        </template>
        {{agent.legalerTel}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-date"></i> 企业成立日期
        </template>
        {{agent.enterpriseCreateTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i> 联系人姓名
        </template>
        {{agent.contactsName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i> 联系人手机
        </template>
        {{agent.contactsTel}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-phone"></i> 传真号码
        </template>
        {{agent.faxNo}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-info"></i> 道路运输经营许可证编号
        </template>
        {{agent.permitNumber}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-info"></i> 电信业务经营许可证编号
        </template>
        {{agent.ipcnum}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-info"></i> 三级等保备案编号
        </template>
        {{agent.psnrnum}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-monitor"></i> 监测状态
        </template>
        {{monitorsStateText(agent.monitorsState)}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-date"></i> 联调或正式开启监测的时间
        </template>
        {{agent.monitorTime}}
      </el-descriptions-item>
    </el-descriptions>

    <el-row style="margin-top: 10px;">
      <el-divider content-position="left">省平台账户信息</el-divider>
    </el-row>

    <el-descriptions class="margin-top" title="" :column="3" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user-solid"></i> 登录账号
        </template>
        {{agent.account}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user-solid"></i> 登录密码
        </template>
        ******
      </el-descriptions-item>
    </el-descriptions>

    <el-row style="margin-top: 10px;">
      <el-divider content-position="left">APP信息</el-divider>
    </el-row>

    <el-table :data="agent.apps" border style="width: 100%; margin-bottom: 10px;">
      <el-table-column prop="appId" label="appid"></el-table-column>
      <el-table-column prop="appName" label="app名称"></el-table-column>
      <el-table-column prop="appSecurity" label="app安全码"></el-table-column>
      <el-table-column prop="appType" label="app类型">
        <template slot-scope="scope">
          {{ appTypeText(scope.row.appType) }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改运营方信息(平台运营方)对话框 -->
    <el-dialog title="修改企业信息" :visible.sync="open" width="1300px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="180px">
        <el-row style="margin-bottom: 15px; color: red;">
          <a><i class="el-icon-warning-outline"></i> 请不要随意更改企业信息！如需更改，请先登陆省平台修改相关信息，修改成功后再修改企业信息（保证企业信息与省平台中的信息一致）。</a>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="企业全称" prop="entName">
              <el-input v-model="form.entName" placeholder="请输入企业全称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditIdentifier">
              <el-input v-model="form.unifiedSocialCreditIdentifier" placeholder="请输入统一社会信用代码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行政区划代码(邮编)" prop="areaCode">
              <el-input v-model="form.areaCode" placeholder="请输入行政区划代码(邮编)" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="注册资金(万元)" prop="registerMoney">
              <el-input v-model="form.registerMoney" placeholder="请输入注册资金(万元)" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="企业注册地址" prop="entAddress">
              <el-input v-model="form.entAddress" placeholder="请输入企业注册地址" style="width: 305%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="营业执照注册日期" prop="registerDate">
              <el-date-picker v-model="form.registerDate" type="date"
                :clearable="false"
                value-format="yyyy-MM-dd"
                placeholder="请输入营业执照注册日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="经营范围" prop="runScope">
              <el-input v-model="form.runScope" placeholder="请输入经营范围" style="width: 305%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="法人代表姓名" prop="legalerName">
              <el-input v-model="form.legalerName" placeholder="请输入法人代表姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人手机" prop="legalerTel">
              <el-input v-model="form.legalerTel" placeholder="请输入法人手机" maxlength="11" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业成立日期" prop="enterpriseCreateTime">
              <el-date-picker v-model="form.enterpriseCreateTime" type="date"
                :clearable="false"
                value-format="yyyy-MM-dd"
                placeholder="请输入企业成立日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系人姓名" prop="contactsName">
              <el-input v-model="form.contactsName" placeholder="请输入联系人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人手机" prop="contactsTel">
              <el-input v-model="form.contactsTel" placeholder="请输入联系人手机" maxlength="11" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="传真号码" prop="faxNo">
              <el-input v-model="form.faxNo" placeholder="请输入传真号码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="道路运输经营许可证编号" prop="permitNumber">
              <el-input v-model="form.permitNumber" placeholder="请输入道路运输经营许可证编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电信业务经营许可证编号" prop="ipcnum">
              <el-input v-model="form.ipcnum" placeholder="请输入电信业务经营许可证编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="三级等保备案编号" prop="psnrnum">
              <el-input v-model="form.psnrnum" placeholder="请输入三级等保备案编号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="监测状态" prop="monitorsState">
              <el-select v-model="form.monitorsState" placeholder="请选择监测状态" style="width: 94%;">
                <el-option
                  v-for="item in states"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="正式开启监测的时间" prop="monitorTime">
              <el-date-picker
                v-model="form.monitorTime"
                type="datetime"
                :clearable="false"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请输入联调或正式开启监测的时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-divider content-position="left">省平台账户信息</el-divider>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="登录账号" prop="account">
              <el-input v-model="form.account" placeholder="请输入省平台登录账号" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="登录密码" prop="passwd">
              <el-input v-model="form.passwd" placeholder="请输入省平台登录密码" show-password />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-divider content-position="left">APP信息</el-divider>
        </el-row>

        <el-row v-for="(app, index) in form.apps" :key="index" style="margin-top: 10px; border-bottom: 1px solid #DCDFE6;">
          <el-col :span="5">
            <el-form-item label="appid" :prop="'apps.' + index + '.appId'" :rules="{ required: true, message: '企业appid不能为空', trigger: 'blur' }" label-width="60px" size="small">
              <el-input v-model="app.appId" placeholder="请输入企业appid" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="名称" :prop="'apps.' + index + '.appName'" :rules="{ required: true, message: '企业app名称不能为空', trigger: 'blur' }" label-width="60px" size="small">
              <el-input v-model="app.appName" placeholder="请输入企业app名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="app安全码" :prop="'apps.' + index + '.appSecurity'" :rules="{ required: true, message: '企业app安全码不能为空', trigger: 'blur' }" label-width="100px" size="small">
              <el-input v-model="app.appSecurity" placeholder="请输入企业app安全码" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类型" :prop="'apps.' + index + '.appType'" :rules="{ required: true, message: 'app类型不能为空', trigger: 'blur' }" label-width="60px" size="small">
              <el-select v-model="app.appType" placeholder="请选择app类型" style="width: 80%;">
                <el-option
                  v-for="item in appTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button v-if="index == 0" type="success" size="small" icon="el-icon-plus" @click.prevent="addDomain()">添加</el-button>
            <el-button v-else type="danger" size="small" icon="el-icon-delete" @click.prevent="removeDomain(app)">删除</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="disabled" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listQy, getQy, updateQy } from "@/api/tws/qy";

export default {
  name: "Qy",
  components: {
  },
  data() {
    return {
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 禁用弹窗新增或修改的确定按钮
      disabled: false,
      // 显示搜索条件
      showSearch: true,
      states: [{
        value: 0,
        label: '未开启'
      }, {
        value: 1,
        label: '联调测试开启'
      }, {
        value: 2,
        label: '正式监测开启'
      }],
      appTypes: [{
        value: 1,
        label: '安卓'
      }, {
        value: 2,
        label: 'ios'
      }],
      // 是否显示弹出层
      open: false,
      agent: {},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        entName: [
          { required: true, message: "企业全称不能为空", trigger: "blur" }
        ],
        unifiedSocialCreditIdentifier: [
          { required: true, message: "统一社会信用代码不能为空", trigger: "blur" }
        ],
        entAddress: [
          { required: true, message: "企业注册地址不能为空", trigger: "blur" }
        ],
        areaCode: [
          { required: true, message: "行政区划代码(邮编)不能为空", trigger: "blur" },
          {
            pattern: /^[1-9][0-9]{5}$/,
            message: "请输入正确的行政区划代码",
            trigger: "blur"
          }
        ],
        registerDate: [
          { required: true, message: "营业执照注册日期不能为空", trigger: "blur" }
        ],
        legalerName: [
          { required: true, message: "法人代表姓名不能为空", trigger: "blur" }
        ],
        legalerTel: [
          { required: true, message: "法人手机不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        contactsName: [
          { required: true, message: "联系人姓名不能为空", trigger: "blur" }
        ],
        contactsTel: [
          { required: true, message: "联系人手机不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        monitorsState: [
          { required: true, message: "监测状态不能为空", trigger: "blur" }
        ],
        monitorTime: [
          { required: true, message: "联调或正式开启监测的时间不能为空", trigger: "blur" }
        ],
        enterpriseCreateTime: [
          { required: true, message: "企业成立日期不能为空", trigger: "blur" }
        ],
        ipcnum: [
          { required: true, message: "电信业务经营许可证编号不能为空", trigger: "blur" }
        ],
        psnrnum: [
          { required: true, message: "三级等保备案编号不能为空", trigger: "blur" }
        ],
        account: [
          { required: true, message: "省平台登录账号不能为空", trigger: "blur" }
        ],
        passwd: [
          { required: true, message: "省平台登录密码不能为空", trigger: "blur" }
        ],
      }
    };
  },
  computed: {
    monitorsStateText(val) {
      return function(val) {
        let va = val;
        this.states.forEach(element => {
          if(element.value === val) {
            va = element.label;
          }
        });
        return va;
      }
    },
    appTypeText(val) {
      return function(val) {
        let va = val;
        this.appTypes.forEach(element => {
          if(element.value === val) {
            va = element.label;
          }
        });
        return va;
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询运营方信息(平台运营方)列表 */
    getList() {
      listQy().then(response => {
        this.agent = response.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        entName: null,
        unifiedSocialCreditIdentifier: null,
        entAddress: null,
        areaCode: null,
        registerMoney: null,
        registerDate: null,
        runScope: null,
        permitNumber: null,
        faxNo: null,
        legalerName: null,
        legalerTel: null,
        contactsName: null,
        contactsTel: null,
        monitorsState: null,
        monitorTime: null,
        enterpriseCreateTime: null,
        ipcnum: null,
        psnrnum: null,
        account: null,
        passwd: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
        apps: []
      };
      this.resetForm("form");
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      if(!this.agent.id) {
        this.$modal.msgError("点太快了...")
        return
      }
      getQy(this.agent.id).then(response => {
        this.form = response.data;
        if(this.form.apps.length == 0) {
          this.form.apps.push({
            appId: '',
            appName: '',
            appSecurity: '',
            appType: ''
          })
        }
        this.open = true;
      });
    },
    addDomain() {
      this.form.apps.push({
        appId: '',
        appName: '',
        appSecurity: '',
        appType: ''
      });
    },
    removeDomain(item) {
      var index = this.form.apps.indexOf(item);
      if (index !== -1) {
        this.form.apps.splice(index, 1)
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.disabled = true;
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateQy(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.disabled = false;
            this.open = false;
            this.getList();
          }).catch(err => {
            this.disabled =false;
          })
          // if (this.form.id != null) {
            
          // } else {
          //   addQy(this.form).then(response => {
          //     this.$modal.msgSuccess("新增成功");
          //     this.disabled = false;
          //     this.open = false;
          //     this.getList();
          //   }).catch(err => {
          //     this.disabled =false;
          //   })
          // }
        } else {
          this.disabled = false;
        }
      });
    }
  }
};
</script>